import React from "react";
import { Link } from "react-router-dom";
import $axios from 'utils/request';
import './House.scss';

export default function (props) {
    let [house, setHouse] = React.useState([]);
    React.useEffect(() => {
      (async () => {
        let res = await $axios.get('/house/list');
        setHouse(res.result);
      })();
    }, []);



  return (
    <div className="home-index bg-fff"> 
      <ul className="list">
        {house.map((item) => (
          <Link key={item.id} to={"/target/detail/"+item.id } className="item">
            <div className="img-box rel">
              <img
                className="w100pc"
                src={item.imageUrl}
                alt=""
              />
              <span className="h40 fcc price fff abs">&yen;{item.showMinPrice}</span>
            </div>
            <div className="desc f14 pb-10">
              <h3 className="mt-10 f12">{item.name}</h3>
              <p className="mt-10 f10 lh15">
                {item.description}
              </p>
              <p className="city fcc mt-5 f10">{item.city}●{item.area}</p>
            </div>
          </Link>
        ))}
      </ul>
    </div>
  );
}
